<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>
        <select class="province">
            <option value="省" selected>省</option>
        </select>
        <select class="city">
            <option value="市" selected>市</option>
        </select>
        <select class="county">
            <option value="县" selected>县</option>
        </select>
    </div>
    <script>
        let province = document.querySelector(".province"),
            city = document.querySelector(".city"),
            county = document.querySelector(".county"),
            p//存储上一个province

         fetch("./city.json")
         .then(response=>response.json())
         .then(data=>{
            for( let k in data){
                province.innerHTML+=`<option value="${k}" >${k}</option>`
            }

            province.addEventListener("change",()=>{
                p = province.value;
                console.log(p);
                // 每次把上一次的重置
                city.innerHTML=`<option value="市" selected>市</option>`
                county.innerHTML=`<option value="县" selected>县</option>`

                for(let k in data[p]){
                    city.innerHTML+=`<option value="${k}" >${k}</option>`
                }
            })

            city.addEventListener("change",()=>{
                let c = city.value
                county.innerHTML=`<option value="县" selected>县</option>`
                data[p][c].forEach(val=>{
                    county.innerHTML+=`<option value="${val}" >${val}</option>`
                })
            })

         }).catch(err=> console.log(err))
    </script>
</body>
</html>